<template>
	<uni-card is-full>
		<view class="mycss-flex-start">
			<text class="title-c">标题:</text>
			<uni-easyinput type="text" v-model="title" placeholder="请输入标题" clearable></uni-easyinput>
		</view>
		<view class="mycss-flex-start myborder">
			<text class="title-c">类别:</text>
			<u-radio-group v-model="radioType" shape="square">
				<u-radio :customStyle="{ margin: '5px' }" v-for="(item, index) in radioList" :key="index"
					:label="item.name" :name="item.id">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="mycss-flex-start myborder">
			<text class="title-c">内容:</text>
			<SpEditor ref="myspedit" :toolbar-config="toolbar" @init="initEditor" @input="inputOver" :readOnly="false">
			</SpEditor>
		</view>
		<view class="mycss-flex-start myborder">
			<u-button type="primary" size="mini" @click="save()">保存</u-button>
			<u-button type="primary" size="mini" @click="cancel()">取消</u-button>
		</view>
	</uni-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		defineEmits,
		defineProps,
		inject
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"


	import SpEditor from "@/uni_modules/sp-editor/components/sp-editor/sp-editor.vue";
	const toolbar = reactive({
		excludeKeys: []
	});
	const addReports = inject('addReports');
	const fun = defineProps({
		onClose: Function,
		onAddReprots: Function
	});

	const emit = defineEmits(['updateReport']);
	const myspedit = ref()
	const title = ref("");
	const content = ref("");
	const radioType = ref("")
	const props = reactive({
		title: "",
		content: "",
		type: ""
	})
	const radioList = reactive([{
		id: "a0",
		name: "日"
	}, {
		id: "a1",
		name: "周"
	}, {
		id: "a2",
		name: "月"
	}, {
		id: "a3",
		name: "季"
	}, {
		id: "a4",
		name: "年"
	}]);


	function save() {
		props.title = title.value
		props.content = content._rawValue.html
		props.type = radioType.value
		console.log('保存', props);
		// emit('updateReport', props);
		// fun.onAddReprots();
		addReports(props)
		cancel();
		title.value = ""
		content.value = ""
		radioType.value = ""
	}

	function cancel() {
		fun.onClose();

		preRender()
	}

	function inputOver(e) {
		// 可以在此处获取到编辑器已编辑的内容
		content.value = e
		console.log('==== inputOver :', e)
	}
	/**
	 * 编辑器就绪
	 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
	 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
	 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
	 */
	function initEditor(editor) {
		myspedit.editorIns = editor // 保存编辑器实例
		// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
		preRender()
	}

	function preRender() {
		myspedit.editorIns.setContents({
			html: content.value
		})
	}
</script>

<style scoped>
	.title-c {
		padding: 10rpx;
		font-size: 30rpx;
		border: 1px solid #e8e8e8;
		white-space: nowrap;
	}

	.myborder {
		border: 1px solid #e8e8e8;
	}
</style>